<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>测试页面</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 1.引入 elemntui样式 我这里引用的是远程的，需要联网-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>
  <!-- 用id=app 指明vue作用域-->
  <div id="app">

    <div>
      <div>作业详情</div>
      <el-divider></el-divider>
      <el-checkbox label="1.点击删除按钮，弹出警告框(询问是否确定),如果选择确定则消息提示删除成功"></el-checkbox>
      <el-button type="danger" @click="del">删除</el-button>
      <el-divider></el-divider>
      <el-checkbox label="2.在输入框中，写一个数字，计算它的位数和,输入:123 输出:6 因为1+2+3=6"></el-checkbox>
      <br>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="tempNumber" placeholder="请输入数字,例如123"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="cal">计算</el-button>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-checkbox label="3.点击按钮会出现一张图片,再点一次会消失"></el-checkbox>
      <el-button type="danger" @click="img">
        <div v-if='!imgFlag'>显示图片</div>
        <div v-if='imgFlag'>取消显示</div>
      </el-button>
      <el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" v-if='imgFlag'></el-image>
      <el-divider></el-divider>
      <el-checkbox label="4.输入账号密码,点击登录,如果账号密码正确,跳转页面到百度。如果不匹配,提示密码错误,只有一个账号(name=admin,psw=admin)"></el-checkbox>
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="name">
          <el-input style="width:300px" v-model='user.name'></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="name">
          <el-input style="width:300px" v-model='user.psw'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-checkbox label="5.上传图片,只需体验这个组件即可,逻辑不用考虑"></el-checkbox>
      <!-- 上传接口位置 调用成功后接受到地址-->
      <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="3"
        :on-exceed="handleExceed">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <el-divider></el-divider>
      <el-checkbox label="6.分页查询:每次点击生效时,就消息提示当前页码"></el-checkbox>
      <el-pagination background layout="prev, pager, next" :total="1000" @current-change="handleCurrentChange"
        :current-page.sync="currentPage">
      </el-pagination>
      <el-divider></el-divider>
      <el-checkbox label="7.axios体验:点击查询用户 请求地址:http://jsonplaceholder.typicode.com/users GET请求"></el-checkbox>
      <el-button type="primary" @click="douban">ajax获取</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180">
        </el-table-column>
      </el-table>


    </div>

  </div>
  <!-- 2.引入 vue.js -->
  <script src="js/vue.js"></script>
  <!-- 3.引入 axios 异步请求工具 -->
  <script src="js/axios.js"></script>
  <!-- 4.引入 elemntui相关的js,处理响应特效的 我这里引用的是远程的，需要联网 -->
  <script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>

  <script>
    //固定语法，new Vue({}) 在大括号里面写代码
    new Vue({
      //5.指明vue作用域  <div id="app"></div>
      el: '#app',
      //6.数据区
      data() {
        return {
          tempNumber: '',
          imgFlag: false,
          user: {
            name: '',
            psw: ''
          },
          currentPage: 1,
          tableData: ''



        }
      },
      //7.钩子函数之一，create表示vue启动时就会运行。一启动就会运行。
      created() {

      },
      //8.所有的方法都会在这里
      methods: {
        //1.删除
        del() {
          this.$confirm('确定删除吗, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        cal() {
          var number = this.tempNumber
          if (isNaN(number)) {
            this.$message({
              type: 'info',
              message: '输入的不是数字'
            });
            return;
          }
          var sum = 0;
          while (number != 0) {
            sum += parseInt(number % 10);
            number = parseInt(number / 10);
          }
          this.$message({
            type: 'success',
            message: this.tempNumber + "的位数和: " + sum
          });
        },
        img() {
          this.imgFlag = !this.imgFlag

        },
        login() {
          if (this.user.name === 'admin' && this.user.psw === 'admin') {
            window.location.href = 'https://www.baidu.com/';
          }
          else {
            this.$message({
              type: 'info',
              message: '密码错误'
            });
          }


        },
        handleCurrentChange() {
          this.$message({
            type: 'success',
            message: '当前页为' + this.currentPage
          });
        },
        douban() {
          axios
            .get('http://jsonplaceholder.typicode.com/users')
            .then(response => {
              this.tableData = response.data;
            })
            .catch(function (error) { // 请求失败处理
              console.log(error);
            });
        }

      }
    })
  </script>
</body>
</html>